<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://localhost:9810/compile?id=audio&format=RAW"></script>
    </head>
    <body bgcolor="grey">
        <!--<div id="tracks"></div>-->
        <!--<img src="img/Record-icon.png">-->
        <div id="record"></div>
        <!--<canvas id="myCanvas" width="578" height="200"></canvas>-->

        <!--<div id="buttons"></div>-->
        <img src="img/Record-icon.png" id="record_pic" hidden="hiddn"></img>




        <script>
            function showTracks() {
                var tracksData = [
                    {'title': 'Stalin 1.1', 'pid': 'uuid:STALIN_1-1'}
                    ,
                    {'title': 'Stalin 1.2', 'pid': 'uuid:STALIN_1-2'}
                ];
                
                var trackListElement = document.getElementById('tracks');
                var tracks = cz.mzk.kramerius.audio.player.makeTracks(tracksData, trackListElement);
            }
           // showTracks();
        </script>
<!--        <script>
            function showRotatingRecord(playlist) {
                var imageUrl = "img/Record-icon.png";
                var recordDiv = document.getElementById('record');
                cz.mzk.kramerius.audio.image.appendRotatingImage(recordDiv, imageUrl, playlist);
            }
            showRotatingRecord();
        </script>-->



        <!--        <script>window.onload = function() {
                        var canvas = document.getElementById("myCanvas");
                        var context = canvas.getContext("2d");
                        var rectWidth = 150;
                        var rectHeight = 75;
        
                        // translate context to center of canvas
                        context.translate(canvas.width / 2, canvas.height / 2);
        
                        // rotate 45 degrees clockwise
                        context.rotate(Math.PI / 4);
        
                        context.fillStyle = "blue";
                        context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
                    };
        
                </script>
        -->
        <!--        <script>
                    var buttonsElement = document.getElementById('buttons');
                    var tracks = cz.mzk.kramerius.audio.player.makeButtons(buttonsElement);
                    
                    //            var rotateButton = document.getElementById('rotateButton');
                    //            var testButton = document.getElementById('testButton');
                    //            cz.mzk.kramerius.audio.player.appendHandler(rotateButton, testButton);
                    //cz.mzk.kramerius.audio.player.alert();
                </script>-->
    </body>
</html>
